<template>
  <view class="container">
    <scroll-view
      scroll-y
      :scroll-top="scrollTop"
      :scroll-with-animation="true"
      refresher-enabled
      :refresher-triggered="refreshStatus"
      :enable-back-to-top="true"
      @refresherrefresh="resetRefresh(true)"
      @scrolltolower="reachBottom"
    >
      <view class="record-list">
        <ve-card
          v-for="record in dataSource"
          :key="record"
          :title="`实际保单号：${record.insureNo || '-'}`"
          :sub-title="record.insureStatusStr"
          :type="record.insureStatus == 0 ? 'yellow' : record.insureStatus == 1 ? 'blue' : 'gray'"
        >
          <ve-cell label="有效期">{{ record.beginDate && record.endDate ? record.beginDate + '-' + record.endDate : '-' }}</ve-cell>
          <ve-cell label="保单附件">
            <previewButton :fileId="record.policyImgFileId" />
          </ve-cell>
          <ve-cell-val label="保单关联门店" :value="record.siteName" />
          <ve-cell-val label="保险公司" :value="record.insureCompanyStr" />
          <ve-cell-price label="总保额" unit="万元" :value="record.insuredSum" />
          <ve-cell-price label="总保险费" :value="record.insureAmt" />
          <!-- 已退保 -->
          <template v-if="record.insureStatus == 3">
            <ve-cell-val label="退保日期" :value="record.backDate" />
            <ve-cell-price label="退保金额" :value="record.backAmount" />
          </template>
          <ve-cell-val label="被保险人" :value="record.insuredPorsen" />
          <ve-cell-val label="被保险人证件号" :value="record.insuredPorsenCard" />
          <ve-cell-val label="业务员姓名" :value="record.experiencedPorsen" />
          <ve-cell-val label="业务员电话" :value="record.experiencedPhone" />
          <ve-cell-val label="系统保单号" :value="record.insureCode" />
          <!-- 投保信息 -->
          <template v-if="record.carInsureDetail && record.carInsureDetail.length > 0">
            <ve-cell
              :label="`投保信息${detailIndex + 1}`"
              layout="vertical"
              :key="detailRecord"
              v-for="(detailRecord, detailIndex) in record.carInsureDetail"
            >
              <view class="info-msg">
                <ve-cell-val label="承保险种" :value="detailRecord.insureKindTypeStr" />
                <ve-cell-price label="保额" unit="万元" :value="detailRecord.insuredSum" />
                <ve-cell-price label="保险费" :value="detailRecord.insureAmt" />
              </view>
            </ve-cell>
          </template>

          <ve-operate-list :operates="operates" :record="record" />
        </ve-card>
      </view>
      <!-- 加载结束列表为空时展示 -->
      <ve-empty v-if="dataSource.length == 0 && loadStatus == 'nomore'"></ve-empty>
      <!-- 底部加载状态 -->
      <ve-load-more v-else :status="loadStatus" bgColor="#F7F7F9"></ve-load-more>
    </scroll-view>
    <!-- 车辆归还、车辆处置不显示新增保单 -->
    <ve-bottom-box
      v-if="pageFrom != 'car-return' && pageFrom != 'car-disposal' && usePermission(`svmsapp:car-manage.detail.insureRecord.add`)"
    >
      <ve-button type="primary" @click="onAddInsureClick">新增保单</ve-button>
    </ve-bottom-box>
  </view>
</template>

<script setup>
  import { ref } from 'vue'
  import { onLoad, onUnload } from '@dcloudio/uni-app'
  import useList from '@/hooks/useList'
  import PreviewButton from '@/components/preview-button.vue'
  import { deleteApi } from '@/api/asset/car-insure'
  import { usePermission } from '@/hooks/usePermission'

  const queryParam = ref({
    insureKind: 1,
  })

  const { resetRefresh, reachBottom, loadData, scrollTop, loadStatus, refreshStatus, dataSource } = useList(
    '/V5/carInsurance/findDetail',
    queryParam,
  )

  // 添加保险
  const onAddInsureClick = () => {
    uni.navigateTo({
      url: `/pages/asset/car-insure/form?insureKind=1&carId=${queryParam.value.carId}`,
    })
  }

  const operates = ref([
    {
      label: '编辑',
      permission: 'svmsapp:car-manage.detail.insureRecord.edit',
      show: (record) => record.insureStatus != 3,
      method: (record) => {
        uni.navigateTo({
          url: `/pages/asset/car-insure/form?insureKind=${record.insureKind}&id=${record.id}`,
        })
      },
    },
    {
      label: '退保',
      permission: 'svmsapp:car-manage.detail.insureRecord.refund',
      show: (record) => record.insureStatus == 1,
      method: (record) => {
        uni.navigateTo({
          url: '/pages/asset/car-insure/form/refund?id=' + record.id,
        })
      },
    },
    {
      label: '操作记录',
      permission: 'svmsapp:car-manage.detail.insureRecord.operateRecord',
      method: (record) => {
        uni.navigateTo({
          url: '/pages/utils/logs?type=6&id=' + record.id,
        })
      },
    },
    {
      label: '删除',
      permission: 'svmsapp:car-manage.detail.insureRecord.delete',
      method: (record) => {
        uni.showModal({
          title: '提示',
          content: '删除后会同步删除保险费用，是否删除此条保险记录？',
          confirmText: '确认',
          success: function (res) {
            if (res.confirm) {
              deleteApi({ id: record.id }).then((res) => {
                uni.showToast({
                  title: res.message,
                  icon: 'none',
                  duration: 2000,
                })
                loadData()
              })
            }
          },
        })
      },
    },
  ])

  const refreshData = () => {
    queryParam.value.pageNumber = 1
    dataSource.value = []
    loadData()

    // 刷新车辆list
    uni.$emit('getList')
    // 刷新车辆详情
    uni.$emit('carDetail_refresh')
  }
  const pageFrom = ref('')
  onLoad((options) => {
    queryParam.value.carId = options.id
    pageFrom.value = options.from
    loadData()

    uni.$on('carInsure_getList', refreshData)
  })
  onUnload(() => {
    uni.$off('carInsure_getList', refreshData)
  })
</script>

<style lang="less" scoped>
  .container {
    height: 100vh;
    background: #f7f8fa;
    .record-list {
      padding: 24rpx 24rpx;
    }
  }

  .status {
    font-size: 28rpx;
    font-weight: 400;
    color: #e59b1c;
    margin-left: 16rpx;
  }

  .info-msg {
    background-color: rgba(247, 248, 250, 1);
    padding: 0.1rpx 32rpx;
    :deep(.ve-cell-title) {
      margin-bottom: 0 !important;
    }
  }
  :deep(.ve-cell-title) {
    width: 220rpx;
    max-width: 220rpx;
  }
</style>
